<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="articleVo.createTime"
          type="datetime"
          placeholder="选择创建时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="articleVo.updateTime"
          type="datetime"
          placeholder="选择最后编辑时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="articleVo.title" placeholder="请输入关键字"/>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>

      <router-link to="/article/add">
        <el-button type="primary" icon="el-icon-search">添加文章</el-button>
      </router-link>

    </el-form>

    <!--数据显示列表-->
    <el-table :data="dataList" fit highlight-current-row>
      <el-table-column prop="id" label="序号" width="70"></el-table-column>

      <el-table-column label="列表图">
        <template slot-scope="scope">
          <div class="pic">
            <img :src="'http://rj0158yod.hd-bkt.clouddn.com/' + scope.row.image" width="80px">
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="title" label="文章标题" width="80" ></el-table-column>

      <el-table-column prop="classify" label="文章分类">
        <template slot-scope="scope">
          <span v-if="scope.row.classify == 0">健康头条</span>
          <span v-if="scope.row.classify == 1">慢病护理</span>
        </template>
      </el-table-column>

      <el-table-column label="发布人(ID)">
        <template slot-scope="scope">{{scope.row.doctorId}}</template>
      </el-table-column>

      <el-table-column prop="status" label="发布状态" width="200">
        <template slot-scope="scope">
          <el-switch
            @change="handleChangeStatus($event, scope.row.id)"
            style="display: block"
            v-model="scope.row.status"
            active-color="#409EFF"
            inactive-color="#8c939d"
            active-text="已发布"
            inactive-text="未发布"
            :active-value="'1'"
            :inactive-value="'0'">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="collectNum" label="收藏数量" width="80" ></el-table-column>
      <el-table-column prop="updateTime" label="操作时间" width="80" ></el-table-column>


      <el-table-column label="操作" width="200">
        <template slot-scope="scope">

          <router-link :to="'/article/edit/' + scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>

          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>
<script>

import article from '../../api/article'

  export default {
    data(){
      return {
        listLoading: true,                // 加载数据
        articleVo: {},                 // 查询条件对象
        currentPage: 1,                   // 当前页
        pageSize: 3,                      // 每页记录数
        dataList:[],                      // 分页数据
        total: 0,                         // 总记录数
        dialogVideoFormVisible: false,    // 维护页面不可见
        article: {},                        //维护表单数据模型
      }
    },

    methods: {
      // 页面初始化查询数据
      getList(value){

        if(value == -1){
          // 点击搜索之后应该从第一页开始查询
          this.currentPage = 1;
        }
        // 此处应该调用api里面的相关方法 getList
        article.getList(this.currentPage, this.pageSize, this.articleVo).then(res => {
          // 以前要获取响应的数据  res.data  拿到的此时result对象
          // 此处 res就是result对象
          // 将查询出来的分页数据赋值给数据模型
          this.dataList = res.data.data;
          this.total = res.data.total;
        });
      },
      // 每页记录数发生变化
      handleSizeChange(size){
        this.pageSize = size;
        this.getList();
      },
      // 当前页发生变化
      handleCurrentChange(current){
        this.currentPage = current;
        this.getList();
      },
      // 清空查询数据
      resetData(){
        // 清空搜索的内容
        this.articleVo = {};
        // 重新查询数据
        this.getList();
      },
      //更改课程的状态
      handleChangeStatus(val,courseId){
        article.getByValAndCourseId(courseId,val);
        // 重新查询数据
        this.getList();
      },

      // 删除文章
      handleRemove(id){
        this.$confirm("是否确定删除数据？", "提示", {type: 'warning'})
          .then(() => {
            // 表示点击了确定
            article.remove(id).then(res => {
              // 此处我要不要考虑失败的情况
              // 弹出成功的提示信息
              this.$message.success(res.message);
              // 重新加载数据
              this.getList(-1);
            });
          })
          .catch(() => {
            // 表示点击了取消
            this.$message.info("取消删除操作");
          });
      },

      /**
       * 图片上传成功之后回调该函数
       * @param res   响应回来的数据,通过该对象可以获得响应数据
       * @param file  上传的图片file
       */
      handleAvatarSuccess(res, file) {
        console.log("上传图片响应回来的数据为:" + res.data);
        //this.article.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res.data;

        this.article.image = res.data;
      },
      /**
       * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
       * @param file    上传的图片file
       * @returns {boolean}
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    },
    created(){
      this.getList();
    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
